<template>
  <table>
    <tbody>
      <tr>
        <td
          ref="cell"
          @copy="handleCopy($event)"
          @mousedown.prevent="handleMouseDown($event)"
        >
          This is a cell12.
        </td>
        <td>{{ copiedData }}</td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  data() {
    return {
      copiedData: null,
    };
  },
  methods: {
    handleCopy(event) {
      if (this.copiedData) {
        event.clipboardData.setData('text/plain', this.copiedData);
      }
      event.preventDefault();
    },
    handleMouseDown(event) {
      console.log('22');
      const target = event.target;
      const selection = window.getSelection();
      const selectedIndex = target.innerText.indexOf(selection.toString());
      console.log('object22: ', selectedIndex);
      this.copiedData =
        selectedIndex >= 0 ? selection.toString() : target.innerText;
      console.log('object: ', this.copiedData);
    },
  },
};
</script>
